<div *ngIf="application;then showApp;else loadApp"></div>
<ng-template #showApp>
    <div id="ApplicationShow">
        <app-project-breadcrumb [project]="project" [application]="application" [workflow]="workflowName"
            [workflowRun]="workflowNum" [workflowRunNode]="workflowNodeRun" [wPipeline]="workflowPipeline">
            <div class="right floated labelFeature" [title]="'workflow_from_repository_btn' | translate">
                <a class="ui label small basic" [class.green]="application && application.from_repository" suiPopup
                    [popupTemplate]="popupFromRepository" popupPlacement="bottom right" popupTrigger="outsideClick"
                    #popup="suiPopup">
                    <i class="code icon"></i>as code
                </a>
                <ng-template let-popup #popupFromRepository>
                    <div class="content infoPopup">
                        <ng-container *ngIf="application && application.from_repository">
                            <p>
                                {{ 'application_from_repository' | translate: {repo: application.from_repository} }}
                            </p>
                        </ng-container>
                        <ng-container *ngIf="application && !application.from_repository">
                            <p>{{'application_repository_help_line_1' | translate}}</p>
                            <p>{{'workflow_repository_help_line_2' | translate}}</p>
                            <div class="footer">
                                <div>
                                    <div class="ui list">
                                        <a class="item" target="_blank"
                                            href="https://ovh.github.io/cds/docs/tutorials/init_workflow_with_cdsctl/">
                                            {{'common_read_more'| translate}}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </ng-container>
                    </div>
                </ng-template>
            </div>
        </app-project-breadcrumb>

        <div class="CDSmenu" *ngIf="application">
            <sm-menu title="" class="pointing secondary">
                <a sm-item [class.active]="selectedTab === 'home'" (click)="showTab('home')">
                    <i class=""></i>{{ 'common_home' | translate }}
                </a>
                <a sm-item [class.active]="selectedTab === 'variables'" (click)="showTab('variables')">
                    <i class="font icon"></i>{{ 'common_variables' | translate }}
                </a>
                <a sm-item [class.active]="selectedTab === 'vuln'" (click)="showTab('vuln')">
                    {{ 'common_vulnerabilities' | translate}}
                </a>
                <a sm-item [class.active]="selectedTab === 'usage'" (click)="showTab('usage')">
                    <i class="map signs icon"></i>{{ 'common_usage' | translate }}{{ ' (' + usageCount + ')' }}
                </a>
                <a sm-item [class.active]="selectedTab === 'keys'" id="ApplicationKeysTab" (click)="showTab('keys')"><i
                        class="privacy icon"></i>
                    {{ 'common_keys' | translate }}
                </a>
                <a sm-item [class.active]="selectedTab === 'advanced'" (click)="showTab('advanced')"
                    *ngIf="application.permission === perm.READ_WRITE_EXECUTE">
                    <i class="graduation icon"></i>{{ 'common_advanced' | translate }}
                </a>
            </sm-menu>
        </div>

        <div class="scrollingContent">
            <div class="paddingContent">
                <div class="viewContent">
                    <div [ngSwitch]="selectedTab">
                        <div *ngSwitchCase="'home'">
                            <app-home [project]="project" [application]="application"></app-home>
                        </div>
                        <div *ngSwitchCase="'variables'">
                            <ng-container
                                *ngIf="application.permission === perm.READ_WRITE_EXECUTE && !application.from_repository">
                                <h3>{{ 'application_variable_form_title' | translate}}</h3>
                                <app-variable-form [loading]="varFormLoading"
                                    (createVariableEvent)="variableEvent($event)"></app-variable-form>
                            </ng-container>
                            <h3>{{ 'application_variable_list_title' | translate}}</h3>
                            <app-variable [variables]="application.variables"
                                [mode]="(application.permission === perm.READ_WRITE_EXECUTE && !application.from_repository)?'edit':'ro'"
                                (event)="variableEvent($event)" auditContext="application" [project]="project"
                                [application]="application"></app-variable>
                            <app-warning-modal [title]="_translate.instant('warning_modal_title')"
                                [msg]="_translate.instant('warning_modal_body')" (event)="variableEvent($event, true)"
                                #varWarning></app-warning-modal>
                        </div>
                        <div *ngSwitchCase="'vuln'">
                            <app-vulnerabilities [project]="project" [application]="application"
                                [vulnerabilities]="application.vulnerabilities"
                                [edit]="(application.permission === perm.READ_WRITE_EXECUTE && !application.from_repository)">
                            </app-vulnerabilities>
                        </div>

                        <div *ngSwitchCase="'usage'">
                            <ng-container *ngIf="usageCount > 0">
                                <app-usage [project]="project" [workflows]="workflows" [pipelines]="pipelines"
                                    [environments]="environments"></app-usage>
                            </ng-container>
                            <ng-container *ngIf="usageCount === 0">
                                <div class="ui info message">
                                    {{ 'application_no_usage' | translate }}
                                </div>
                            </ng-container>
                        </div>
                        <div *ngSwitchCase="'keys'">
                            <app-application-keys [project]="project" [application]="application">
                            </app-application-keys>
                        </div>
                        <div *ngSwitchCase="'advanced'">
                            <app-application-admin [application]="application" [project]="project">
                            </app-application-admin>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>
<ng-template #loadApp>
    <div class="ui text active loader">Loading application...</div>
</ng-template>
